<template>
  <div >
    <MyNavBar></MyNavBar>
    <!--我们发现轮播图组件把导航组件给遮盖主了。-->
    <MyCarousel></MyCarousel>

    <div class="index_container">
      <div class="article-list">
        <!---这里先显示轮播图-->
        <!--这里显示最新更新的博文组件-->
        <TopArticleContainer :catalog="'博文'" :icon="'el-icon-document-copy'"></TopArticleContainer>
        <TopArticleContainer :catalog="'码道'" :icon="'el-icon-s-promotion'"></TopArticleContainer>
      </div>
      <div class="article-list" style="margin-top: 20px">
        <MyTopicCourse></MyTopicCourse>
      </div>
    </div>
    <MyFooter></MyFooter>

  </div>
</template>

<script>

import MyNavBar from "@/components/MyNavBar.vue";
import MyCarousel from "@/components/MyCarousel.vue";
import MyFooter from "@/components/MyFooter.vue";
import MyTopicCourse from "@/components/MyTopicCourse.vue";
import TopArticleContainer from "@/components/TopArticleContainer.vue";
export default {
  name: "IndexView",
  components:{
    MyNavBar,
    MyCarousel,
    TopArticleContainer,
    MyTopicCourse,
    MyFooter
  },
  data() {
    return {


    }
  },
  methods: {

  }
}
</script>

<style scoped>

.container {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.index_container {
  margin-top: 20px;
  text-align: center;
  background: #fefefe;
}

.article-list {
  width: 80%;
  margin: 0px auto;
  display: flex; /*弹性布局*/
  justify-content: space-around;
}
</style>